import { h, VNode } from "snabbdom";
import { SlateElement } from "@wangeditor/editor";
import { BuildCardElement } from "./customTypes";

function renderBuildCard(elem: SlateElement): VNode {
  const {
    cover,
    status,
    status_color,
    status_background,
    title,
    address,
    area,
    price,
    tags,
    disadvantage_color,
    disadvantage_cover,
    disadvantage_name
  } = elem as BuildCardElement;
  const newTags = tags.split(",");
  console.log(elem);
  let tagsList = [];
  for (let i = 0; i < newTags.length; i++) {
    const item = h(
      "span",
      { style: { backgroundColor: "#F1F1F1", color: "#555B62", marginRight: "8px", padding: "3px 5px" } },
      newTags[i]
    );
    tagsList.push(item);
  }
  // 容器
  const vnode = h(
    "div",
    {
      props: {
        className: "w-e-textarea-build-card-container"
      }
    },
    [
      h(
        "div",
        {
          props: {
            className: "w-e-textarea-build-card-container-box"
          }
        },
        [
          h("img", { props: { className: "w-e-textarea-build-card-container-cover" }, src: cover }),
          h("div", { props: { className: "w-e-textarea-build-card-container-box-box" } }, [
            h("div", { props: { className: "header-one" } }, [
              h("div", { props: { className: "header-status" } }, [
                h(
                  "span",
                  {
                    props: { className: "header-status-in" },
                    style: { fontSize: "12px", color: status_color, backgroundColor: status_background, padding: "3px 4px" }
                  },
                  status
                )
              ]),
              h("span", { style: { fontSize: "18px", fontWeight: "600", marginLeft: "16px" } }, title)
            ]),
            h("div", { style: { color: "#555B62", margin: "8px 0 0 0 " } }, [
              h("span", { style: { fontSize: "14px" } }, `【${address}】`),
              h("span", { style: { fontSize: "14px", marginLeft: "10px" } }, area)
            ]),
            h("div", { style: { marginTop: "0px" } }, [
              h("span", { style: { color: "#f60", fontSize: "25px" } }, price),
              h("span", { style: { fontSize: "16px", paddingLeft: "5px" } }, "元/m²")
            ]),
            h("div", { style: { display: "flex", fontSize: "12px" } }, [...tagsList]),
            h("div", { style: { display: disadvantage_name ? "flex" : "none", margin: "10px 0 0 0" } }, [
              h("img", { style: { width: "18px", height: "18px" }, src: disadvantage_cover }),
              h("span", { style: { color: disadvantage_color, fontSize: "14px", margin: "0 0 0 5px" } }, disadvantage_name)
            ])
          ])
        ]
      )
    ]
  );

  return vnode;
}

const conf = {
  type: "build-card",
  renderElem: renderBuildCard
};

export default conf;
